<!DOCTYPE html> 
<html> 
    <head> 
   <link rel="stylesheet" href="{{STATIC_URL}}jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="{{STATIC_URL}}jquery.min.js"></script>
    <script src="{{STATIC_URL}}jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head> 
<body>

<div data-role="page" > 
    <div data-role="header">
      <h1 style="color:#FFFFFF;">{{quiz.title}}</h1>

      
   <div data-role="navbar">
	<ul>
<li><a onclick="$('#sideNoti').load('/quiz/lecture/getquizzes/{{quiz.lecture.id}}')" class="ui-btn-active ui-state-persist"  href="#" >Quizzes</a></li>
		<li><a    href="#"  onclick="$('#sideNoti').load('/messages/list/{{lecture.id}}')" >Messaging Board</a></li>
	</ul>
</div><!-- /navbar -->   
   
    </div> 
 <div data-role="content">
<div style="color:#FF0000;text-align:center;font-size:100px;" id="countdown"></div>
<div id="notifier">
<a href="#" data-role="button" data-icon="delete" onclick= $('#sideNoti').load('/quiz/end/{{quiz.id}}');> End the quiz</a>
</div>

<script type="text/javascript">
  
  var start = {{quiz.duration}}*60;
  Number.prototype.toMinutesAndSeconds = function() {
        var nbr = Math.floor(this / 60);
        return (nbr+":")+(((nbr=(this-(nbr*60)))<10)?"0"+nbr:nbr);
}

function display(seconds, output) {
       
        output.innerHTML = (--seconds).toMinutesAndSeconds();
        if(seconds > 0) {
                window.setTimeout(function(){display(seconds, output)}, 1000);
        }
        
        if(seconds < 10) {
  
        document.getElementById("notifier").innerHTML="10 seconds left"
        }
        
        if (seconds == 0) {
        //q=(document.location.href);
        //void(open('/quiz/end/{{quiz.id}}','_self','resizable,location,menubar,toolbar,scrollbars,status'));
            $('#sideNoti').load('/quiz/start/{{quiz.id}}');
        }
}
display(start, document.getElementById("countdown"));

</script>
</div>
</body>
</html>
